<template>
	<view class="add-contaibner">
		<view class="address-choose-box" v-if="!userAddress.userName">
			<button type="primary" size="mini" class="btnChooseAddress" @click="chooseAddress">请选择收货地址+</button>
		</view>

		<view class="address-info-box" v-else @click="chooseAddress">
			<view class="row1">
				<view class="row1-left">
					<view class="username">收货人：<text>{{userAddress.userName}}</text></view>
				</view>
				<view class="row1-right">
					<view class="phone">电话：<text>{{userAddress.telNumber}}</text></view>
					<uni-icons type="arrowright" size="16"></uni-icons>
				</view>
			</view>
			<view class="row2">
				<view class="row2-left">收货地址：</view>
				<view class="row2-right">
					{{userAddress.provinceName+userAddress.cityName+userAddress.countyName+userAddress.detailInfo}}
				</view>
			</view>
		</view>

		<view class="line"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: "my-address",
		computed: {
			// 将 m_cart 模块中的 cart 数组映射到当前页面中使用
			...mapState('userInfo', ['userAddress']),
		},
		data() {
			return {

			};
		},
		onLoad() {
			console.log('页面初始化');
			console.log(1111, this.userAddress);
		},
		methods: {
			...mapMutations('userInfo', ['setUserAddress']),
			async chooseAddress() {
				// 1. 调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能
				//    返回值是一个数组：第 1 项为错误对象；第 2 项为成功之后的收货地址对象
				const [err, succ] = await uni.chooseAddress().catch(err => err)

				// 2. 用户成功的选择了收货地址
				if (err === null && succ.errMsg === 'chooseAddress:ok') {
					// 为 data 里面的收货地址对象赋值
					console.log(succ);
					this.setUserAddress(succ)
				}
			}
		}

	}
</script>

<style lang="scss">
	.add-contaibner {
		.address-choose-box {
			height: 90px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.line {
			height: 4px;
			background-image: repeating-linear-gradient(135deg, blue, blue 8%, #fff 8%, #fff 9%, red 9%, red 17%, #fff 17%, #fff 18%);
		}

		.address-info-box {
			font-size: 12px;
			height: 90px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 0 5px;

			// 第一行
			.row1 {
				display: flex;
				justify-content: space-between;

				.row1-right {
					display: flex;
					align-items: center;

					.phone {
						margin-right: 5px;
					}
				}
			}

			// 第二行
			.row2 {
				display: flex;
				align-items: center;
				margin-top: 10px;

				.row2-left {
					white-space: nowrap;
				}
			}
		}
	}
</style>
